<page-header [title]="'权限管理'"></page-header>
<div class="example-input">
  <div nz-row [nzGutter]="{ md: 8, lg: 24, xl: 24 }">
    <div nz-col nzMd="8" nzSm="24">
      <nz-input-group nzSearch nzSize="large" [nzSuffix]="suffixIconButton" style="width:100%">
        <input placeholder="根据名称搜索..." nz-input [(ngModel)]="searchValue" (ngModelChange)="onChange($event)" />
      </nz-input-group>
      <ng-template #suffixIconButton>
        <button nz-button nzType="primary" nzSize="large" nzSearch (click)="search()"><i nz-icon type="search" theme="outline"></i></button>
      </ng-template>
    </div>
    <div nz-col nzMd="2" nzSm="24" style="float:right">
      <button nz-button nzType="primary" (click)="showAddModal()">
        <i nz-icon type="plus"></i>新增
      </button>
    </div>
  </div>
</div>
<div style="padding: 1rem; background: #fff;  min-height: 10rem; ">
  <nz-table #rowSelectionTable [nzData]="displayData">
    <thead>
      <tr>
        <th>ID</th>
        <th>名称</th>
        <th>状态</th>
        <th>备注</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of rowSelectionTable.data">
        <td>{{data.id}}</td>
        <td>{{data.name}}</td>
        <td>
          <ng-container *ngIf="data.status==1">
            <span>
              <nz-badge nzStatus="success" nzText="正常"></nz-badge>
            </span>
          </ng-container>
          <ng-container *ngIf="data.status==0">
            <span>
              <nz-badge nzStatus="error" nzText="异常"></nz-badge>
            </span>
          </ng-container>
        </td>
        <td>{{data.describe}}</td>
        <td>
          <a (click)="showModal(data)">
              <i nz-icon type="edit"></i>编辑</a>
          <nz-divider nzType="vertical"></nz-divider>
          <a (click)="showDeleteConfirm(data.id,data.name)">
              <i nz-icon type="delete"></i> 删除</a>
        </td>
      </tr>
    </tbody>
  </nz-table>
</div>

<!-- 修改页面 -->
<nz-modal [(nzVisible)]="isVisible" nzTitle="修改页面" (nzOnCancel)="handleCancelconfig()" (nzOnOk)="handleCancelconfig()" nzWidth="50%">
  <form nz-form style="margin-bottom: 1vw;" [formGroup]="configForm">
    <div nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }">
      <div nz-col [nzSm]="12" [nzXs]="24" >
        <nz-form-item nzFlex>
          <nz-form-label [nzSm]="4" [nzXs]="6"  nzRequired>权限ID</nz-form-label>
          <nz-form-control [nzSm]="18" [nzXs]="18">
            <input nz-input  name="configId" type="text" id="configId" [ngModel]="configId" [disabled]="true"  [ngModelOptions]="{standalone: true}">
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSm]="12" [nzXs]="24" >
        <nz-form-item nzFlex>
          <nz-form-label [nzSm]="4" [nzXs]="6" nzRequired>名称</nz-form-label>
          <nz-form-control [nzSm]="18" [nzXs]="18">
            <input nz-input  name="configName" formControlName="configName"  id="configName" [ngModel]="configName">       
            <nz-form-explain *ngIf="configForm.get('configName').dirty && configForm.get('configName').errors || configForm.get('configName').pending ">
              <ng-container *ngIf="configForm.get('configName').hasError('required')">
                请输入您的名称!
              </ng-container>              
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSm]="24" [nzXs]="24">
        <nz-form-item nzFlex>
          <nz-form-label [nzSm]="2" [nzXs]="6" >类型</nz-form-label>
          <nz-form-control [nzSm]="21" [nzXs]="18">
            <nz-select nzMode="tags" style="width: 100%;" nzPlaceHolder="添加类型..." [(ngModel)]="listOfSelectedValue"
              [ngModelOptions]="{standalone: true}">
              <nz-option *ngFor="let option of optionalFields" [nzLabel]="option.label" [nzValue]="option.value">
              </nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSm]="24" [nzXs]="24">
        <nz-form-item nzFlex>
          <nz-form-label [nzSm]="2" [nzXs]="6">备注</nz-form-label>
          <nz-form-control [nzSm]="21" [nzXs]="18">
            <input formControlName="configRemark" nz-input  [ngModel]="configRemark">
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  </form>
  <nz-table #deployTable [nzData]="childdata" [nzHideOnSinglePage]="true">
    <thead>
      <tr>
        <th>操作类型</th>
        <th>描述</th>
        <th>是否选中</th>
        <th>操作 <i nz-icon class="anticon anticon-plus" (click)="addRowConfig()" style="cursor: pointer;" nzTitle="添加"
            nzPlacement="top" nz-tooltip></i></th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of deployTable.data">
        <td>
          <div class="editable-cell">
            <div class="editable-cell-text-wrapper">
              <ng-container *ngIf="!editConfig[data.key].edit">
                {{data.action}}
              </ng-container>
              <ng-container *ngIf="editConfig[data.key].edit">
                <input type="text" nz-input [(ngModel)]="editConfig[data.key].data.action">
              </ng-container>
            </div>
          </div>
        </td>
        <td>
          <ng-container *ngIf="!editConfig[data.key].edit">
            {{data.describe}}
          </ng-container>
          <ng-container *ngIf="editConfig[data.key].edit">
            <input type="text" nz-input [(ngModel)]="editConfig[data.key].data.describe">
          </ng-container>
        </td>
        <td>
          <ng-container *ngIf="!editConfig[data.key].edit">
            {{data.defaultCheck}}
          </ng-container>
          <ng-container *ngIf="editConfig[data.key].edit">
            <nz-select style="width: 100%;" nzShowSearch nzAllowClear nzPlaceHolder="Select a person" [(ngModel)]="editConfig[data.key].data.defaultCheck">
              <nz-option nzLabel="true" nzValue="true"></nz-option>
              <nz-option nzLabel="false" nzValue="false"></nz-option>
            </nz-select>
          </ng-container>
        </td>
        <td>
          <div class="editable-row-operations">
            <ng-container *ngIf="!editConfig[data.key].edit">
              <a (click)="startEditconfig(data.key)" style="margin-right:1vw">编辑</a>
              <nz-popconfirm [nzTitle]="'确定要删除吗'" (nzOnConfirm)="deleteRowConfig(data.key)">
                <a nz-popconfirm>删除</a>
              </nz-popconfirm>
            </ng-container>
            <ng-container *ngIf="editConfig[data.key].edit">
              <a (click)="saveEditconfig(data.key)" style="margin-right:1vw">保存</a>
              <nz-popconfirm [nzTitle]="'确定要离开吗?'" (nzOnConfirm)="saveEditconfig(data.key)">
                <a nz-popconfirm>离开</a>
              </nz-popconfirm>
            </ng-container>
          </div>
        </td>
      </tr>
    </tbody>
  </nz-table>
  <div class="modal-footer">
    <button nz-button type="button" (click)="handleCancelconfig()">取消</button>
    <button nz-button type="button" [nzType]="'primary'" (click)="confighandleOk()" [nzLoading]="isLoadingTwo" [disabled]="configForm.get('configName').errors">保存</button>
  </div>


</nz-modal>
<!-- 新增页面 -->
<nz-modal [(nzVisible)]="isAddVisible" nzTitle="新增页面" (nzOnCancel)="handleCancelAdd()" (nzOnOk)="addhandleOk()" nzWidth="50%">
  <form nz-form [formGroup]="validateForm" style="margin-bottom: 1vw;">
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSm]="12" [nzXs]="24">
        <nz-form-item nzFlex>
          <nz-form-label [nzSm]="4" [nzXs]="6"  nzRequired>ID</nz-form-label>
          <nz-form-control [nzSm]="18" [nzXs]="18" nzHasFeedback >
            <input formControlName="authID" nz-input placeholder="ID">
            <nz-form-explain *ngIf="validateForm.get('authID').dirty && validateForm.get('authID').errors || validateForm.get('authID').pending ">
              <ng-container *ngIf="validateForm.get('authID').hasError('required')">
                请输入您的ID!
              </ng-container>
              <ng-container *ngIf="validateForm.get('authID').hasError('duplicated')">
                当前ID已被占用!
              </ng-container>
              <ng-container *ngIf="validateForm.get('authID').hasError('regular')">
                ID只能是数字和字母!
              </ng-container>
              <ng-container *ngIf="validateForm.get('authID').pending">
                验证中...
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSm]="12" [nzXs]="24">
        <nz-form-item nzFlex>
          <nz-form-label [nzSm]="4" [nzXs]="6"  nzRequired>名称</nz-form-label>
          <nz-form-control [nzSm]="18" [nzXs]="18" nzHasFeedback>
            <input formControlName="authName" nz-input placeholder="名称...">            
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSm]="24" [nzXs]="24">
        <nz-form-item nzFlex>
          <nz-form-label [nzSm]="2" [nzXs]="6" >类型</nz-form-label>
          <nz-form-control [nzSm]="21" [nzXs]="18">
            <nz-select nzMode="tags" style="width: 100%;" nzPlaceHolder="添加类型..." [(ngModel)]="listOfTagOptions"
              [ngModelOptions]="{standalone: true}" >
              <nz-option *ngFor="let option of listOfOption" [nzLabel]="option.label" [nzValue]="option.value">
              </nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSm]="24" [nzXs]="24">
        <nz-form-item nzFlex>
          <nz-form-label [nzSm]="2" [nzXs]="6">备注</nz-form-label>
          <nz-form-control [nzSm]="21" [nzXs]="18">
            <input formControlName="authRemark" nz-input placeholder="备注">
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  </form>
  <div>
    <nz-table #editRowTable [nzData]="dataSet" [nzHideOnSinglePage]="true">
      <thead>
        <tr>
          <th>操作类型</th>
          <th>描述</th>
          <th>是否选中</th>
          <th>操作 <i nz-icon class="anticon anticon-plus" (click)="addRow()" style="cursor: pointer;" nzTitle="添加"
              nzPlacement="top" nz-tooltip></i></th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of editRowTable.data">
          <td>
            <div class="editable-cell">
              <div class="editable-cell-text-wrapper">
                <ng-container *ngIf="!editCache[data.key].edit">
                  {{data.action}}
                </ng-container>
                <ng-container *ngIf="editCache[data.key].edit">
                  <input type="text" nz-input [(ngModel)]="editCache[data.key].data.action" [ngModelOptions]="{standalone: true}">
                </ng-container>
              </div>
            </div>
          </td>
          <td>
            <ng-container *ngIf="!editCache[data.key].edit">
              {{data.describe}}
            </ng-container>
            <ng-container *ngIf="editCache[data.key].edit">
              <input type="text" nz-input [(ngModel)]="editCache[data.key].data.describe" [ngModelOptions]="{standalone: true}">
            </ng-container>
          </td>
          <td>
            <ng-container *ngIf="!editCache[data.key].edit">
              {{data.defaultCheck}}
            </ng-container>
            <ng-container *ngIf="editCache[data.key].edit">
              <nz-select style="width: 100%;" nzShowSearch nzAllowClear nzPlaceHolder="Select a person" [(ngModel)]="editCache[data.key].data.defaultCheck">
                <nz-option nzLabel="true" nzValue="true"></nz-option>
                <nz-option nzLabel="false" nzValue="false"></nz-option>
              </nz-select>
            </ng-container>
          </td>
          <td>
            <div class="editable-row-operations">
              <ng-container *ngIf="!editCache[data.key].edit">
                <a (click)="startEdit(data.key)" style="margin-right:1vw">编辑</a>
                <nz-popconfirm [nzTitle]="'确定要删除吗'" (nzOnConfirm)="deleteRow(data.key)">
                  <a nz-popconfirm>删除</a>
                </nz-popconfirm>
              </ng-container>
              <ng-container *ngIf="editCache[data.key].edit">
                <a (click)="saveEdit(data.key)" style="margin-right:1vw">保存</a>
                <nz-popconfirm [nzTitle]="'确定要离开吗?'" (nzOnConfirm)="cancelEdit(data.key)">
                  <a nz-popconfirm>离开</a>
                </nz-popconfirm>
              </ng-container>
            </div>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </div>
  <div class="modal-footer">
    <button nz-button type="button" (click)="handleCancelAdd()">取消</button>    
    <button nz-button type="button" [nzType]="'primary'" (click)="addhandleOk()" [nzLoading]="isLoadingOne" [disabled]="validateForm.get('authID').errors||!validateForm.get('authName').dirty">保存</button>
  </div>
</nz-modal>